 <template>
 <div>
     <Table :columns="columns1" :data="data1" :row-class-name="rowClassName"  ></Table>
    <!-- <Button type="success" @click='addComment' id='addcomment'>Add Comment</Button> -->
    <Button type="success" @click="addComment" id='addcomment'>Add Comment</Button>
    <Modal
        v-model="modal1"
        title="Place input your comment..."
        @on-ok="oks"
        >
        <quill-editor v-model="formItem.text" ref="myQuillEditor"></quill-editor>
    </Modal>




    <Table border :columns="columns7" ref="selection" :data="list" @on-selection-change="selected" @on-row-click="getID"></Table>
    <Button @click="handleSelectAll(true)" style="margin-top:10px">Set all selected</Button>
    <Button @click="handleSelectAll(false)" style="margin-top:10px">Cancel all selected</Button>
    <Button type="error" style="margin-top:10px" @click="delectSelect">delectSelected</Button>
    <Button type="primary" @click="toNews" style="margin-top:10px;margin-left:540px">
            <Icon type="chevron-left"></Icon>
            Backward
    </Button>
    <Page :total="total" size="small" show-elevator show-sizer :page-size-opts="pageSizeOpts" :styles="Pstyle" @on-change="changePages" @on-page-size-change="changePagesSize"></Page>


 </div>
</template>
<script>
import Base from "../base";
import { eventBus } from '../bus';
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import { quillEditor } from 'vue-quill-editor'
export default {
    components: {
      quillEditor
    },
   mixins: [Base],

  data() {
    return {
      modules: { type: "comment" },
      modal1: false,
      value:'',
      columns1: [
        {
          title: '',
          key: "content"
        }
      ],
      data1: [
        {
          content:''
          }
      ],

      formItem: {
        text: "",
        username:"元芳",
        newsId:''
      },
      Pstyle: { marginTop: "10px" },
      columns7: [
        {
          type: "selection",
          width: 60,
          align: "center"
        },
        {
          type:"html",
          title: "Text",
          key: "text",

        },
        {
          title: "Username",
          key: "username",
          width:120
        },
        {
          title: "Action",
          key: "action",
          width: 150,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.modal1 = true;
                    }
                  }
                },
                "change"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.removes();
                    }
                  }
                },
                "delete"
              )
            ]);
          }
        }
      ]
    };
  },

  methods: {
    rowClassName(row, index) {
      if (index === 0) {
        return "demo-table-info-row";
      } else if (index === 3) {
        return "demo-table-error-row";
      }
      return "";
    },
    delectSelect(){
      this.selectData.ids=this.selectData.ids.toString();
      this.$http
        .post(`http://10.31.160.71:3000/${this.modules.type}/data/removes`, this.selectData)
        .then(response => {
          this.getList();
          this.selectData.ids=[]
          console.log('OK');
        });
     },
    oks(){
      this.adds();
    },
    addComment() {
      this.modal1 = true;
      this.prevID="";
    },
    changePages(page) {
      this.filter.page = page;
      this.getList();
    },
    changePagesSize(pageSize) {
      this.filter.rows = pageSize;
      this.getList();
    },
    getList(){
      this.filter.newsId=this.formItem.newsId;
      this.$http
        .post(`http://10.31.160.71:3000/comment/list`,this.filter)
        .then(response => {
          this.list = response.data.rows;
          this.total = response.data.total;
        });
    },
    removes(){
      this.$Modal.confirm({
          render: (h) => {
              return h('p', {

              },"Are you sure?")
          },
          onOk:()=>{
            let pid=this.prevID._id;
            this.$http
            .delete(`http://10.31.160.71:3000/comment/data/`+pid)
            .then(response => {
              this.getList();
              this.success(true);
            });
          }
      })

    },
    adds(){
        if(this.formItem.text!==''&&this.prevID===''){
          this.$http
          .post("http://10.31.160.71:3000/comment/data", this.formItem)
          .then(response => {
            this.getList();
            this.formItem.text='';
            this.success(true);
          });
        }else if(this.formItem.text!==''&&this.prevID!==''){
          let pid=this.prevID._id;
          this.$http
          .put(`http://10.31.160.71:3000/comment/data/`+pid, this.formItem)
          .then(response => {
            this.getList();
            this.formItem.text='';
            this.success(true);
          });
        }else{
          this.error(true);
        }
    },
    //返回新闻
    toNews(){
      this.$router.push({ name: 'news'});
    }
  },

  created(){
      eventBus.$on('sendNewID',(data)=>{
        this.formItem.newsId=data;
        this.getList();
        this.$http
        .get(`http://10.31.160.71:3000/news/data/`+data)
        .then(response => {
          this.columns1[0].title=response.data.title;
          this.data1[0].content=response.data.brief;
        });
      });
      eventBus.$on('sendUser',data=>{
        this.formItem.username=data;
      })
  },
  destroyed(){
    eventBus.$emit('backUser',this.formItem.username);
  }
};
</script>
<style>
.ivu-table .demo-table-info-row td {
  padding: 20px;
}
#addcomment {
  margin-top: 5px;
  margin-left: 88%;
  margin-bottom: 5px;
}
</style>
